<template>
    <div>
        <el-button type="primary" @click="newWebHookDialogVisible = true">{{$t('webhook.add')}}</el-button>
        <el-table :data="webHookList" style="width: 100%" stripe v-loading="isLoading">
            <el-table-column width="80" prop="ID" label="ID"/>
            <el-table-column prop="URL" :label="$t('webhook.url')"/>
            <el-table-column prop="Type" :label="$t('webhook.type')">
                <template v-slot="scope">{{typeOptions[scope.row.Type]}}</template>
            </el-table-column>
            <el-table-column prop="Token" :label="$t('webhook.token')"/>
            <el-table-column width="120" prop="Retry" :label="$t('webhook.retry')"/>
            <el-table-column width="120" prop="Timeout" :label="$t('webhook.timeout')"/>
            <el-table-column :label="$t('general.operate')" width="300">
                <template v-slot="scope">
                    <el-button
                            size="small"
                            @click="()=>{editWebHookForm = JSON.parse(JSON.stringify(scope.row)); editWebHookDialogVisible = true}">
                        {{$t('general.edit')}}
                    </el-button>
                    <el-popconfirm
                            :confirmButtonText="$t('general.confirm_cancel')"
                            :cancelButtonText="$t('general.cancel')"
                            icon="el-icon-info"
                            iconColor="red"
                            :title="$t('webhook.delete_title')"
                            @confirm="handleDelete(scope.row)"
                    >
                    <template #reference>
                        <el-button size="small" type="danger">{{$t('general.delete')}}
                        </el-button>
                    </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- New WebHook -->
        <el-dialog :title="$t('webhook.add')" v-model="newWebHookDialogVisible">
            <el-form :model="newWebHookForm" label-width="120px">
                <el-form-item :label="$t('webhook.url')">
                    <el-input v-model="newWebHookForm.URL"/>
                </el-form-item>
                <el-form-item :label="$t('webhook.type')">
                    <el-select v-model="newWebHookForm.Type" :placeholder="$t('webhook.please_select')">
                        <el-option
                                v-for="(label, value) in typeOptions"
                                :key="value"
                                :label="label"
                                :value="value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('webhook.token')">
                    <el-input v-model="newWebHookForm.Token"/>
                    <p>{{$t('webhook.token_tips')}}</p>
                </el-form-item>
                <el-form-item :label="$t('webhook.retry')">
                    <el-input-number v-model="newWebHookForm.Retry" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('webhook.timeout')">
                    <el-input-number v-model="newWebHookForm.Timeout" :min="0"></el-input-number>
                    <p>{{$t('webhook.timeout_tips')}}</p>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onNewWebHook">{{$t('webhook.publish')}}</el-button>
        </el-dialog>

        <!-- Edit WebHook -->
        <el-dialog :title="$t('webhook.edit')" v-model="editWebHookDialogVisible">
            <el-form :model="editWebHookForm" label-width="120px">
                <el-form-item :label="$t('webhook.url')">
                    <el-input v-model="editWebHookForm.URL"/>
                </el-form-item>
                <el-form-item :label="$t('webhook.type')">
                    <el-select v-model="editWebHookForm.Type" :placeholder="$t('webhook.please_select')">
                        <el-option
                                v-for="(label, value) in typeOptions"
                                :key="value"
                                :label="label"
                                :value="value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('webhook.token')">
                    <el-input v-model="editWebHookForm.Token"/>
                    <p>{{$t('webhook.token_tips')}}</p>
                </el-form-item>
                <el-form-item :label="$t('webhook.retry')">
                    <el-input-number v-model="editWebHookForm.Retry" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('webhook.timeout')">
                    <el-input-number v-model="editWebHookForm.Timeout" :min="0"></el-input-number>
                    <p>{{$t('webhook.timeout_tips')}}</p>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="onEditWebHook">{{$t('webhook.edit')}}</el-button>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n'
import utils from '@/utils.js'
const { proxy } = getCurrentInstance()
const { t } = useI18n()

const webHookList = ref([])
const isLoading = ref(true)

const newWebHookDialogVisible = ref(false)
const editWebHookDialogVisible = ref(false)

const newWebHookForm = reactive({
                    URL: '',
                    Type: '',
                    Token: '',
                    Retry: 0,
                    Timeout: 0,
                })
const editWebHookForm = reactive({})

const typeOptions = {
                    'any': t('webhook.type_any'),
                    'new_round': t('webhook.type_new_round'),
                    'submit_flag': t('webhook.type_submit_flag'),
                    'game_begin': t('webhook.type_game_begin'),
                    'game_pause': t('webhook.type_game_pause'),
                    'game_end': t('webhook.type_game_end')

                }

onMounted(() => {
            getWebHooks()
        })

function getWebHooks() {
                utils.GET("/manager/webhooks").then(res => {
                    webHookList.value = res
                    isLoading.value = false
                }).catch(err => proxy.$message.error(err))
            }

function onNewWebHook() {
                utils.POST('/manager/webhook', newWebHookForm).then(res => {
                    proxy.$message.success(res)
                    newWebHookDialogVisible.value = false
                    Object.assign(newWebHookForm, {
                        URL: '',
                        Type: '',
                        Token: '',
                        Retry: 0,
                        Timeout: 0,
                    })
                    getWebHooks()
                }).catch(err => {
                    proxy.$message.error(err)
                })
            }

function onEditWebHook() {
                utils.PUT('/manager/webhook', editWebHookForm).then(res => {
                    proxy.$message.success(res)
                    editWebHookDialogVisible.value = false
                    getWebHooks()
                }).catch(err => {
                    proxy.$message.error(err)
                })
            }

function handleDelete(row) {
                utils.DELETE("/manager/webhook?id=" + row.ID).then(res => {
                    proxy.$message({
                        message: res,
                        type: 'success'
                    });
                    getWebHooks()
                }).catch(err => proxy.$message({message: err, type: 'error'}))
            }
</script>

<style scoped>

</style>